<template>
  <div>
    <div style="margin-bottom: 30px;">
      
        <RouterLink to="/test">跳转</RouterLink>
      
      <el-button @click="router.push('/test')">
        跳转
      </el-button>
    </div>
    <div>
      <el-input :prefix-icon="Search" v-model="data.input" style="width: 200px;" placeholder="enter"  :prefit-icon="Search"></el-input>
      {{ data.input }}
    </div>
    <div>
      <el-select style="width: 240px;"v-model = "value" placeholder="enter">
        <el-option v-for="item in data.fruits" :key="item" :label="item" :value="item"></el-option>
      </el-select>
      {{ data.value }}
    </div>
    
    <div>
      <el-table :data = "data.tabledata" style="width: 100%;" stripe border>
        <el-table-column prop="id" label="id" style="width: 200px;"></el-table-column>
        <el-table-column prop="name" label="name" style="width: 200px;"></el-table-column>
        <el-table-column prop="sex" label="sex"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope" >
            <el-button @click="edit(scope.row)">{{ scope.row }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination v-model:current-page="data.currentpage"
          v-model:page-size="data.pagesize"
          :page-sizes="[5,10,15,20]"
          layout="total,sizes,prey,pager,next,jumper"
          :total="data.tabledata.length"
          >
          
        </el-pagination>
      </div>
    </div>
    

    <el-dialog v-model="data.dialogvisable" title="学生信息" >
      <div style="padding: 20px;">
        <div>id:{{ data.row.id }}</div>
        <div>name:{{ data.row.name }}</div>
        <div>sex:{{ data.row.sex }}</div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { Apple, Search } from "@element-plus/icons-vue"
import router from '@/router';
const data = reactive({
  input : null,
  value : '',
  fruits : [
    "apple",
    "orange",
    "banana"
  ],

  currentpage : 1,
  pagesize: 5,
  tabledata : [
    {id: 1, name:"aaa" , sex : "men"},
    {id: 2, name:"bbb" , sex : "women"},
    {id: 3, name:"ccc" , sex : "men"},
    {id: 1, name:"aaa" , sex : "men"},
    {id: 2, name:"bbb" , sex : "women"},
    {id: 3, name:"ccc" , sex : "men"},
    {id: 1, name:"aaa" , sex : "men"},
    {id: 2, name:"bbb" , sex : "women"},
    {id: 3, name:"ccc" , sex : "men"},
    {id: 1, name:"aaa" , sex : "men"},
    {id: 2, name:"bbb" , sex : "women"},
    {id: 3, name:"ccc" , sex : "men"},
    {id: 1, name:"aaa" , sex : "men"},
    {id: 2, name:"bbb" , sex : "women"},
    {id: 3, name:"ccc" , sex : "men"},
    {id: 2, name:"bbb" , sex : "women"},
    {id: 3, name:"ccc" , sex : "men"},
    {id: 1, name:"aaa" , sex : "men"},
    {id: 2, name:"bbb" , sex : "women"},
    {id: 3, name:"ccc" , sex : "men"},
    {id: 1, name:"aaa" , sex : "men"},
    {id: 2, name:"bbb" , sex : "women"},
    {id: 3, name:"ccc" , sex : "men"},
    {id: 1, name:"aaa" , sex : "men"},
    {id: 2, name:"bbb" , sex : "women"},
    {id: 3, name:"ccc" , sex : "men"},
    
  ],
  row:null,
  dialogvisable:false
})
  const edit = (row)=>{
    data.row = row
    data.dialogvisable = true
  }
    
  
    

  
  data.tabledata = data.tabledata.splice(0,5)    

</script>